<template>
	<view class="content">
		<view class="content-top">
			<view class='cell-group'>
				<view class='cell-item user-head' style="height: 77px;min-height: 77px;">
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>头像</view>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next user-head-img have-none' mode="aspectFill" :src="avatar" @click="uploadAvatar"></image>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd' style="text-align: right;padding: 0;">
						<view class='cell-hd-title'>昵称</view>
					</view>
					<view class='cell-item-bd' style="width: 100%;padding-right: 7px;">
						<input class='cell-bd-input' placeholder='' v-model="nickname" style="width: 100%;text-align: right;" ></input>
					</view>
				</view>
				<view class='cell-item cell-item-mid'>
					<view class='cell-item-hd'  style="text-align: right;padding: 0;">
						<view class='cell-hd-title'>手机号码</view>
					</view>
					<view class='cell-item-bd' style="width: 100%;padding-right: 7px;">
						<view class='cell-bd-input'  style="width: 100%;text-align: right;">{{mobile}}</view>
					</view>
				</view>
				<!-- #ifndef MP-TOUTIAO || MP-ALIPAY -->
		<!-- 			<view class='cell-item cell-item-mid right-img'>
						<view class='cell-item-hd'>
							<view class='cell-hd-title'>性别</view>
						</view>
						<view class='cell-item-bd'>
							<view class="uni-list">
								<view class="uni-list-cell-db">
									<picker mode="selector" @change="bindPickerChange" :value="index" :range="objectSex">
										<view class="uni-input">{{objectSex[sex]}}</view>
									</picker>
								</view>
							</view>
						</view>
						<view class='cell-item-ft'>
							<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png'></image>
						</view>
					</view> -->
				<!-- #endif -->
			<!-- 	<view class='cell-item cell-item-mid right-img'>
					<view class='cell-item-hd'>
						<view class='cell-hd-title'>生日</view>
					</view>
					<view class='cell-item-bd'>
						<view class="uni-list">
							<view class="uni-list-cell-db">
						        <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						            <view class="uni-input">{{birthday}}</view>
						        </picker>
						    </view>
						</view>
					</view>
					<view class='cell-item-ft'>
						<image class='cell-ft-next icon' src='/static/image/ic-pull-down.png'></image>
					</view>
				</view> -->
			</view>
		</view>
		<view class="button-bottom">
			<button class="btn btn-square btn-b"  hover-class="btn-hover2" @click="submitHandler()" :disabled='submitStatus' :loading='submitStatus'>保存</button>
		</view>
	</view>
</template>

<script>
export default {
    data() {
        return {
			title: 'picker',
			avatar: '',
			objectSex: ['男', '女', '未知'],
			index: 2,
			nickname: '',
			mobile: '',
			date: '1990-01-01',
			birthday: '请选择',
			sex: 0,
			submitStatus: false
        }
    },
    computed: {
        startDate() {
            return this.getDate('start');
        },
        endDate() {
            return this.getDate('end');
        }
    },
    methods: {
		//性别
		bindPickerChange: function(e) {
			this.sex = e.target.value;
		},
		//生日
		bindDateChange: function(e) {
			this.birthday = e.target.value;
		},
        getDate(type) {
            const date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();

            if (type === 'start') {
                year = year - 60;
            } else if (type === 'end') {
                year = year + 2;
            }
            month = month > 9 ? month : '0' + month;;
            day = day > 9 ? day : '0' + day;
            return `${year}-${month}-${day}`;
        },
		// 用户上传头像
		uploadAvatar () {
			this.$api.uploadFiles(res => {
				if (res.status) {
					let avatar = res.data.url // 上传成功的图片地址
		            // 执行头像修改
		            this.$api.changeAvatar({
		                avatar: avatar
		            }, res => {
		                if (res.status) {
							this.$common.successToShow('上传成功', () => {
								this.avatar = res.data.avatar
							})
		                } else {
							this.$common.errorToShow(res.msg)
						}
		            })
				} else {
					this.$common.errorToShow(res.msg)
				}
			})
		},
		// 保存资料
		submitHandler() {
			this.submitStatus = true;
				this.$api.editInfo({
						nickname: this.nickname
					}, res => {
						this.$common.successToShow(res.msg, result => {
							// this.submitStatus = false;
							uni.navigateBack({
								delta: 1
							});
						});
					},res => {
						this.submitStatus = false;
					}
				);
		}
    },
	onLoad: function() {
		var _this = this;
		_this.$api.userInfo({}, function(res) {
			if (res.status) {
				_this.nickname = res.data.nickname;
				_this.mobile = res.data.mobile;
				_this.avatar = res.data.avatar;
			} else {
				//报错了
				_this.$common.errorToShow(res.msg);
			}
		});
	}
}
</script>

<style scoped>
.user-head{
	height: 100upx;
}
.user-head-img{
	height: 90upx;
	width: 90upx;
	border-radius: 50%;
}
.cell-hd-title{
	color: #333;
}
.cell-item-bd{
	color: #666;
	font-size: 26upx;
}
.cell-item-hd{
	width: 160rpx;
}
.button-bottom{
	background-color: #fff !important;
	    position: inherit !important;
	    bottom: 0;
	    height: 48px !important;
	    width: 100%;
	    display: flex;
	    z-index: 66;
	    box-shadow: none !important;
}
.btn-b{
	background-color: #fff !important;
	color: #D62222 !important;
	font-size: 16px;
}
.btn-square{
	padding: 0px 20px;
	    height: 48px !important;
	    line-height: 48px !important;
	    min-width: 75px;
	    border: none !important;
}
</style>
